<template>
  <div>
    <Modal
      v-model="taskModal"
      draggable
      scrollable
      title="任务详情"
      footer-hide
      width="1300"
    >
      <p slot="header" class="modalHeader">任务详情</p>
      <p slot="close" class="modalHeader" @click="modalClose">
        <CButtonClose slot="close" />
      </p>

      <Split v-model="split1">
        <div slot="left">
          <div id="dqmapBox2" ref="themap"></div>
        </div>
        <div slot="right">
          <Table
            border
            ref="selection"
            :ellipsis="true"
            :columns="getColumns"
            :data="queryDataList"
            highlight-row
            @on-selection-change="onSelectionChange"
            @on-select="queryTableSelectEvent"
            @on-select-cancel="queryTableSelectCancelEvent"
            @on-select-all="onTableSelectAll($event, tablelayerId1)"
            @on-select-all-cancel="
              onTableSelectAllCancel($event, tablelayerId1)
            "
          >
            <!-- <template slot="img" slot-scope="{ row }">
                <Icon
                  type="ios-photos-outline"
                  :style="{ color: row.colorName }"
                ></Icon>
              </template> -->

            <template slot="dataname" slot-scope="{ row }">
              <span
                :title="row.dataname"
                @mouseenter="tableMouseEnter(row, tableHightLayerId1)"
                @mouseout="tableMouseOut(tableHightLayerId1)"
                class="inOneLine"
                >{{ row.dataname }}</span
              >
            </template>
          </Table>
          <div class="tableBottom">
            <span>共计 {{ this.queryDataList.length }} 条</span>
            <span>已选择{{ this.selectRow.length }}条</span>
          </div>
        </div>
      </Split>
      <!-- <template #footer class="footerBtns">
          <CButton @click="banCancel = false" color="info" class="cancel-btn"
            >取消</CButton
          >
          <CButton @click="banOk" color="info" class="system-btn-style"
            >确定</CButton
          >
        </template> -->
    </Modal>
  </div>
</template>
 
<script>
const TABLELAYERID1 = "greenLineLayer"; //查询列表图层ID
const TABLEHIGHLAYERID1 = "greenLineLayer-high"; //优选列表图层ID
export default {
  name: "cycleTaskInfo",
  props: {
    modalShow: {
      type: Object,
      default: {
        modal: false,
        taskId: 0,
      },
    },
  },
  data() {
    return {
      tablelayerId1: TABLELAYERID1,
      tableHightLayerId1: TABLEHIGHLAYERID1,

      //查询结果要素集范围列表
      queryGeoJsonList: {
        type: "FeatureCollection",
        features: [],
      },
      taskId: 0,
      taskModal: false,
      split1: 0.6,
      map: {},
      queryDataList: [],
      selectRow: [],
      /*右侧表格*/
      getColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        // {
        //   title: "序号",
        //   type: "index",
        //   width: 65,
        //   align: "center",
        // },
        // {
        //   title: "详图",
        //   key: "",
        //   slot: "img",
        //   width: 70,
        //   align: "center",
        // },
        {
          key: "dataname",
          title: "数据名称",
          slot: "dataname",
          minWidth: 100,
          align: "center",
        },
        {
          key: "productlevel",
          title: "产品级别",
          minWidth: 80,
          align: "center",
          maxWidth: 100,
        },
        {
          key: "datatypename",
          title: "数据类型",
          minWidth: 100,
          align: "center",
          maxWidth: 140,
        },
      ],
    };
  },

  watch: {
    modalShow: {
      handler(val) {
        this.taskModal = val.modal;
        this.taskId = val.taskId;
        if (val.modal) this.init();
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {
    init() {
      this.initMap();
      this.refreshTable();
    },

    modalClose() {
      this.$emit("close");
      this.map.remove();
    },

    refreshTable() {
      let _this = this;
      let path = this.$api.dataOptimizationApi.queryProduced;
      let param = {
        taskId: this.taskId,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.code == 0 && res.data.success) {
          this.queryDataList = res.data.data.dataList;
          let layerId = TABLELAYERID1;
          this.getFeatureGeoJson(layerId, _this.queryDataList);
          this.drawLineLayer(layerId, _this.queryGeoJsonList);
          this.hightLayer(layerId, _this.queryGeoJsonList);
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    resizeMap() {
      let _this = this;
      _this.map.resize()._update(); //更新页面
    },

    onSelectionChange(data) {
      this.selectRow = data;
    },
    //查询列表表格选中事件
    queryTableSelectEvent(selection, row) {
      this.selectRow = selection;
      this.selectFeature(selection, TABLELAYERID1);
    },
    //查询列表表格取消事件
    queryTableSelectCancelEvent(selection, row) {
      //   this.tableSelectCancelEvent(selection, TABLELAYERID1, row);
    },

    //显示要素
    selectFeature(selection, layerId) {
      let arr = ["any"];
      selection.forEach((item) => {
        arr.push(["==", ["get", "id"], item.dataid]);
      });
      this.map.setFilter(layerId, arr);
    },
    //取消要素显示
    cancelSelectFeature(selection, layerId) {
      let tempData = this.queryDataList;
      let arr = ["all"];
      //   if (layerId === TABLELAYERID2) {
      //     tempData = this.resultTableData;
      //   }
      if (selection.length < 1) {
        //都不显示
        tempData.forEach((ele) => {
          arr.push(["!=", ["get", "id"], ele.dataid]);
        });
      }
      //选中的图层要素都显示
      selection.forEach((item) => {
        arr.push(["==", ["get", "id"], item.dataid]);
      });

      this.map.setFilter(layerId, arr);
    },

    //绘制线图层
    drawLineLayer(id, geoJsonList) {
      let that = this;
      that.map.addSource(id, {
        //原始影像边框
        type: "geojson",
        data: geoJsonList,
      });
      if (id === TABLELAYERID1) {
        that.map.addLayer({
          id: TABLELAYERID1,
          type: "line",
          source: id,
          layout: {},
          paint: {
            "line-color": "green",
            "line-width": 1,
            "line-opacity": 0.8,
          },
        });
        // that.map.addLayer({
        //   id: TABLELAYERID1,
        //   type: "fill",
        //   source: id,
        //   layout: {},
        //   paint: {
        //     "fill-color": "#6da8ff",
        //     "fill-opacity": 0.3,
        //     "fill-outline-color": "green",
        //   },
        // });
      }
      //    else if (id === TABLELAYERID2) {
      //     that.map.addLayer({
      //       id: TABLELAYERID2,
      //       type: "line",
      //       source: id,
      //       layout: {},
      //       paint: {
      //         "line-color": "#0078ff",
      //         "line-width": 1,
      //         "line-opacity": 0.8,
      //       },
      //     });
      //   }
    },
    clearLineLayer(id) {
      let that = this;
      let existLayer = that.map.getLayer(id);
      if (existLayer) {
        that.map.removeLayer(id);
      }
      let existSource = that.map.getSource(id);
      if (existSource) {
        that.map.removeSource(id);
      }
    },
    //get绘制线框的空间范围
    getFeatureGeoJson(id, data) {
      let _this = this;
      _this.queryGeoJsonList = {
        type: "FeatureCollection",
        features: [],
      };
      //   _this._filterGeoJsonList = {
      //     type: "FeatureCollection",
      //     features: [],
      //   };
      data.forEach((ele) => {
        ele._checked = true; //默认设置勾选

        let coordinates = JSON.parse(ele.shape).coordinates;
        let _tempFeature = {
          type: "Feature",
          epsg: 3857,
          properties: {
            valuecolor: "#ff0000",
            id: ele.dataid,
            dataInfo: ele,
          },
          geometry: {
            type: "Polygon",
            coordinates: coordinates,
          },
        };
        if (id === TABLELAYERID1) {
          _this.queryGeoJsonList.features.push(_tempFeature);
        }
        //  else if (id === TABLELAYERID2) {
        //   _this._filterGeoJsonList.features.push(_tempFeature);
        // }
      });
    },
    hightLayer(id, data) {
      // 高亮显示
      let tempIdLayer = id + "-high";
      let pointlayerhighlight = {
        id: tempIdLayer,
        type: "line",
        source: {
          type: "geojson",
          data: data,
        },
        filter: ["in", "id", ""],
        layout: {
          "line-cap": "round" /* 线条末端样式 */,
        },
        paint: {
          "line-color": "red",
          "line-width": 3,
        },
      };

      if (!this.map.getLayer(tempIdLayer)) {
        this.map.addLayer(pointlayerhighlight);
      } else {
        this.map.getSource(tempIdLayer).setData(data);
      }
    },

    //图层高亮显示
    tableMouseEnter(data, layerId) {
      this.map.setFilter(layerId, ["in", "id", data.dataid]);
    },
    // 图层取消高亮显示
    tableMouseOut(layerId) {
      this.map.setFilter(layerId, ["in", "id", ""]);
    },

    // 查询和优选列表全选事件
    onTableSelectAll(selection, layerId) {
      if (layerId === TABLELAYERID1) {
        this.selectRow = selection;
      }
      //   else if (layerId === TABLELAYERID2) {
      //     // this.selectResultRow = selection;
      //   }
      this.selectFeature(selection, layerId);
    },
    // 查询和优选列表全部取消事件
    onTableSelectAllCancel(selection, layerId) {
      if (layerId === TABLELAYERID1) {
        this.selectRow = selection;
      }
      //   else if (layerId === TABLELAYERID2) {
      //     // this.selectResultRow = selection;
      //   }
      this.cancelSelectFeature(selection, layerId);
    },

    initMap() {
      this.map = new mapboxgl.Map({
        container: "dqmapBox2",
        style: "./static/map/map.json",
        center: [116.4, 34.5],
        zoom: 3, // starting zoom
        minZoom: 3,
        epsg: 3857,
      });

      //   this.map.addControl(new mapboxgl.FullscreenControl());
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "metric",
      });
      this.map.addControl(scale);
      this.map.on("load", () => {
        this.resizeMap();
      });
      //   this.map.on("click", TABLELAYERID1, this.getFeatureDetail);
    },
  },
};
</script>
<style scoped>
/deep/.ivu-modal-body {
  height: calc(70vh);
}
/deep/.ivu-table-body,
/deep/.ivu-table-wrapper-with-border {
  height: calc(63vh);
  overflow-y: auto;
}
/deep/#dqmapBox2 {
  height: calc(63vh);
}
</style>
<style scoped>
.tableBottom {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 20px;
}
</style>